<!-- 后管非登录页布局容器 -->
<template>
  <el-container class="home_box">
    <el-header>
      <Header @onCollapse="handleCollapse" />
    </el-header>
    <el-container class="home_con">
      <el-aside class="el-aside" width="null">
        <Aside :isCollapse="isCollapse" @onCurPath="handleCurPath" />
      </el-aside>
      <el-main class="el-main">
        <div class="el_main_top flex_column_between_start el_main_top_bottom"
          :style="tagsShow ? 'height:56px' : tabsShow ? 'height:66px' : breadcrumbVue ? '16px' : '0px'" ref="elMainTop"
          v-show="elMainTopShow">
          <!-- 面包屑 start -->
          <BreadcrumbVue v-show="breadcrumbVue" />
          <!-- 面包屑 end -->
          <!-- 标签页页形式展示 start -->
          <Tabs :curPath="curPath" ref="tabs" v-show="tabsShow" />
          <!-- 标签页页形式展示 end -->
          <!-- 标签形式展示 start -->
          <Tags :curPath="curPath" ref="tabs" v-show="tagsShow" />
          <!-- 标签形式展示 end -->
        </div>
        <Main class="el_main_con" ref="main" :elMainConHeight="elMainConHeight" />
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
// @ is an alias to /src
// import HelloWorld from '@/components/HelloWorld.vue';
// 引入全局变量样式文件
import variables from '@/assets/scss/base.module.scss';
import Header from '@/components/Layout/Header.vue';
import Aside from '@/components/Layout/Aside.vue';
import Main from '@/components/Layout/Main.vue';
import BreadcrumbVue from '@/components/Common/Breadcrumb.vue';
import Tabs from '@/components/Common/Tabs.vue';
import Tags from '@/components/Common/Tags.vue';

export default {
  name: 'HomeView',
  components: {
    // HelloWorld
    Header,
    Aside,
    Main,
    BreadcrumbVue,
    Tabs,
    Tags
  },
  data() {
    return {
      ...variables, //使用全局scss变量
      isCollapse: false, //是否水平折叠收起菜单(仅在mode为vertical时可用)
      elMainConHeight: '0px',
      elMainTopShow: true, //main区的top元素是否显示
      breadcrumbVue: true, //面包屑是否存在
      tabsShow: false, //tabs 是否显示
      tagsShow: true, //tags 是否显示
    }
  },
  computed: {
    curPath: function () {
      return this.$route.path
    },
  },
  mounted() {
    this.handleMainHeight();
    window.addEventListener('resize', this.handleMainHeight);
  },
  destroyed(){
    window.removeEventListener('resize', this.handleMainHeight);
  },
  methods: {
    //展开，折叠菜单栏
    handleCollapse(isCollapse) {
      this.isCollapse = isCollapse;
    },
    //获取当前路由路径
    handleCurPath(curPath) {
      //并调用子组件的方法
      this.$refs.tabs && this.$refs.tabs.addTab(curPath);
    },
    //计算el_main_con的高度，自适应
    handleMainHeight() {
      let elMainTopHeight = document.getElementsByClassName('el_main_top')[0].offsetHeight;
      // console.log('elMainTopHeight:', elMainTopHeight);
      let homeConHeight = document.getElementsByClassName('home_con')[0].offsetHeight;
      // console.log('homeConHeight:', homeConHeight);
      let elMainCon = document.getElementsByClassName('el_main_con')[0];
      //mainTop区是否显示，显示时，需再减去它的bottom值10px
      // 40 为 main区的上下padding的和
      let elMainTopShowBottom = this.elMainTopShow ? 10 : 0;
      let elMainConHeight = (homeConHeight - elMainTopHeight - 40 - elMainTopShowBottom) + 'px';
      // elMainCon.style.height = elMainConHeight;
      elMainCon.style.maxHeight = elMainConHeight;
      this.elMainConHeight = elMainConHeight;
      // console.log('elMainConHeight:', elMainConHeight);
    }
  }
}
</script>
<style lang="scss" scoped>
.el-header {
  height: $header_height;
  background-color: $theme_color;
  color: $font_color;
  text-align: center;
  line-height: $header_height;
}

.el-container {
  height: 100%;
}

.home_box {
  height: 100%;

  .home_con {
    height: calc(#{$percent_100} - #{$header_height}); //calc(100% - 60px);

    .el-aside {
      max-width: $aside_width;
      background-color: $theme_color;
      color: $font_color;
      text-align: center;
    }

    .el-main {
      width:calc(#{$percent_100} - #{$aside_width});
      background-color: $main_bg_color;
      color: $main_font_color;
      font-size: $main_font_size;
      text-align: center;
      height: $percent_100;
      overflow: hidden;

      .el_main_top {
        width: 100%;

        &.el_main_top_bottom {
          margin-bottom: 10px;
        }
      }

      .el_main_con {
        width: 100%;
      }
    }
  }
}
</style>
